import "./index.less";
import { Input, Button, Table, TableColumnsType, Space, Popconfirm, PopconfirmProps, Select, Modal, Tag } from "antd";
import { RedoOutlined, SearchOutlined, ColumnHeightOutlined, SettingOutlined } from "@ant-design/icons";
import Modify from "../modify";
import NewAdd from "../newAdd/index";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { deleteDictType } from "@/api/system/dict/type";
const { Option } = Select;
interface listType {
	id: number;
	name: string;
	status: number;
	remark: string;
	type: string;
	createTime: number;
}
interface dataType {
	list: listType;
	total: number;
}
interface TableProps {
	position: string;
	onSetType?: (type: string) => void;
	data?: dataType;
	ongetDict: (data: object) => void;
}

const cancel: PopconfirmProps["onCancel"] = e => {
	console.log(e);
};
// const data: DataType[] = [];
const table: React.FC<TableProps> = ({ onSetType, ongetDict, data, position }) => {
	const [ictionary, setIctionary] = useState("");
	const [state, setSate] = useState("");
	const [isModalOpen, setIsModalOpen] = useState(false);
	const [isNewAddModalOpen, setIsNewAddModalOpen] = useState(false);
	const [modifyId, setModifyId] = useState(0);
	const [isSearch, setSearch] = useState(true);
	const { t } = useTranslation();
	const [dataArr, setDataArr] = useState([]);
	//字典名称
	const onhandleInputChange = (e: Event) => {
		const { target } = e;
		setIctionary(target?.value);
	};
	//状态
	const onGenderChange = (value: string) => {
		setSate(value);
	};
	//重置
	const onReset = () => {
		setIctionary("");
		setSate("");
		ongetDict({ pageNo: 1, pageSize: 10 });
	};
	//查询
	const onQuery = () => {
		console.log(position);
		if (position == "left") {
			ongetDict({ pageNo: 1, pageSize: 10, name: ictionary, status: Number(state) });
		} else if (position == "right") {
			ongetDict({ pageNo: 1, pageSize: 10, label: ictionary, status: Number(state) });
		}
	};
	//修改弹窗开启
	const showModal = (id: number) => () => {
		setModifyId(id);
		setIsModalOpen(true);
	};
	//新增弹窗开启
	const showNewAddModal = () => {
		setIsNewAddModalOpen(true);
	};
	//修改弹窗关闭
	const handleCancel = () => {
		ongetDict({ pageNo: 1, pageSize: 10 });
		setIsModalOpen(false);
	};
	//新增弹窗关闭
	const handleNewAddCancel = () => {
		setIsNewAddModalOpen(false);
	};
	//删除
	// eslint-disable-next-line @typescript-eslint/no-unused-vars
	const confirm: PopconfirmProps["onConfirm"] = (_id: number) => (e: Event) => {
		deleteDictType(_id);
		return;
	};
	//搜索展示隐藏
	const showSearch = () => {
		setSearch(!isSearch);
	};
	//分页查询
	const handlePageChange = (page: number, pageSize: number) => {
		ongetDict({ pageNo: page, pageSize });
	};
	useEffect(() => {
		setDataArr(data?.list);
	}, [data?.list]);
	// eslint-disable-next-line @typescript-eslint/no-unused-vars
	const onClickItem = (type: string, e: Event) => {
		const { target } = e;
		if (target?.tagName !== "A" && onSetType) {
			onSetType(type);
		}

		return;
	};
	const leftColumns: TableColumnsType<DataType> = [
		{ title: t("system.dict.dictionary_name"), dataIndex: "id", key: "id" },
		{ title: t("system.dict.name"), dataIndex: "name", key: "name" },
		{
			title: t("system.dict.state"),
			dataIndex: "status",
			key: "status",
			render: (_, { status }) => <>{status == "0" ? <Tag color="success">开启</Tag> : <Tag color="error">关闭</Tag>}</>
		},
		{ title: t("system.dict.notes"), dataIndex: "remark", key: "remark" },
		{ title: t("system.dict.creation_time"), dataIndex: "createTime", key: "createTime" },
		{
			title: t("system.dict.operate"),
			dataIndex: "",
			key: "x",
			render: (_, record) => (
				<Space size="middle">
					<a onClick={showModal(record.id)}>{t("system.dict.modify")}</a>
					<Popconfirm
						title="Are you sure to delete this task?"
						onConfirm={confirm(record.id)}
						onCancel={cancel}
						okText="Yes"
						cancelText="No"
					>
						<a>{t("system.dict.delete")}</a>
					</Popconfirm>
				</Space>
			)
		}
	];
	const rightColums: TableColumnsType<DataType> = [
		{ title: t("system.dict.dictionary_coding"), dataIndex: "id", key: "id" },
		{ title: t("system.dict.dictionary_label"), dataIndex: "label", key: "label" },
		{ title: t("system.dict.dictionary_key_value"), dataIndex: "sort", key: "sort" },
		{ title: t("system.dict.dictionary_sorting"), dataIndex: "sort", key: "sort" },
		{
			title: t("system.dict.state"),
			dataIndex: "status",
			key: "status",
			render: (_, { status }) => <>{status == 0 ? <Tag color="success">开启</Tag> : <Tag color="error">error</Tag>}</>
		},
		{ title: t("system.dict.color_type"), dataIndex: "colorType", key: "colorType" },
		{ title: "CSS Class", dataIndex: "cssClass", key: "cssClass" },
		{ title: t("system.dict.notes"), dataIndex: "remark", key: "remark" },
		{ title: t("system.dict.creation_time"), dataIndex: "createTime", key: "createTime" },
		{
			title: t("system.dict.operate"),
			dataIndex: "",
			key: "x",
			render: (_, record) => (
				<Space size="middle">
					<a onClick={showModal(record.key)}>{t("system.dict.modify")}</a>
					<Popconfirm
						title="Are you sure to delete this task?"
						onConfirm={confirm(record.key)}
						onCancel={cancel}
						okText="Yes"
						cancelText="No"
					>
						<a>{t("system.dict.delete")}</a>
					</Popconfirm>
				</Space>
			)
		}
	];
	return (
		<>
			<div className="dictTable">
				<div className="dictTable-herder" style={{ display: isSearch ? "flex" : "none" }}>
					<div className="dictTable-herder-form ">
						<p>{t("system.dict.dictionary_name")}</p>
						<Input placeholder={t("system.dict.enter")} value={ictionary} onChange={onhandleInputChange}></Input>
					</div>
					<div className="dictTable-herder-form ">
						<p>{t("system.dict.state")}</p>
						<Select
							placeholder={t("system.dict.please_select")}
							allowClear
							className="herder-form-select"
							onChange={onGenderChange}
							value={state ? state : t("system.dict.please_select")}
						>
							<Option value="0">off</Option>
							<Option value="1">on</Option>
						</Select>
					</div>
					<div className="dictTable-herder-button ictTable-herder-form">
						<Button onClick={onReset}>{t("system.dict.reset")}</Button>
						<Button type="primary" onClick={onQuery}>
							{t("system.dict.query")}
						</Button>
					</div>
				</div>
				<div className="dictTable-classification">
					<div className="dictTable-classification-classList">
						<p>{position === "left" ? t("system.dict.dictionary_classification_list") : t("system.dict.dictionary_data_list")}</p>
						<div>
							<Button type="primary" onClick={showNewAddModal}>
								{t("system.dict.newly_added")}
							</Button>
							<RedoOutlined />
							<SearchOutlined onClick={showSearch} />
							<ColumnHeightOutlined />
							<SettingOutlined />
						</div>
					</div>

					<Table
						columns={position == "left" ? leftColumns : rightColums}
						dataSource={dataArr}
						rowKey={item => item.id}
						style={{ height: "610px", overflowY: "scroll" }}
						scroll={{ x: 1600, y: 500 }}
						pagination={{
							position: ["bottomRight"],
							total: data?.total,
							onChange: (page, pageSize) => handlePageChange(page, pageSize)
						}}
						// eslint-disable-next-line @typescript-eslint/no-unused-vars
						onRow={record => {
							return {
								// eslint-disable-next-line @typescript-eslint/no-unused-vars
								onClick: (event: Event) => {
									onClickItem(record.type, event);
								}
							};
						}}
					></Table>
				</div>
			</div>
			<Modal title={t("system.dict.modify")} open={isModalOpen} onCancel={handleCancel} footer={null} width={800}>
				<Modify onCancel={handleCancel} modifyId={modifyId}></Modify>
			</Modal>
			<Modal
				title={t("system.dict.newly_added")}
				open={isNewAddModalOpen}
				onCancel={handleNewAddCancel}
				footer={null}
				width={800}
			>
				<NewAdd onCancel={handleNewAddCancel}></NewAdd>
			</Modal>
		</>
	);
};
export default table;
